:root {
  --title-color: #606e7b;
}

:local(.field) {
  composes: flex align-center from "style";
}

:local(.fieldNameTitle) {
  composes: flex-full pr2 from "style";
}

:local(.fieldName) {
  composes: fieldNameTitle;
  font-size: 16px;
}

:local(.fieldNameTextInput) {
  composes: input p1 from "style";
  color: var(--title-color);
  width: 100%;
  font-size: 14px;
}

:local(.fieldSelect) {
  composes: input p1 block from "style";
}

:local(.fieldType) {
  composes: flex-half pr2 from "style";
  overflow: hidden;
  white-space: nowrap;
}

:local(.fieldDataType) {
  composes: flex-half from "style";
}

:local(.fieldSecondary) {
  composes: field;
  font-size: 13px;
}

:local(.fieldActualName) {
  composes: fieldNameTitle;
  composes: text-monospace from "style";
}

:local(.fieldForeignKey) {
  composes: fieldType;
}

:local(.fieldOther) {
  composes: fieldDataType;
}
